<template>
  <div class="senior-search">
    <splitpanes class="default-theme">
      <pane :size="size">
        <senior-search-file/>
      </pane>
      <pane>
        <senior-search-container/>
      </pane>
    </splitpanes>
  </div>
</template>
<script lang="ts" setup>
import {Pane, Splitpanes} from 'splitpanes'
import SeniorSearchFile from "@/page/senior-search/layout/SeniorSearchFile/SeniorSearchFile.vue";
import SeniorSearchContainer from "@/page/senior-search/layout/SeniorSearchContainer/SeniorSearchContainer.vue";

const size = ref(Math.round(300 / window.innerWidth * 100))
</script>
<style scoped lang="less">
.senior-search {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  background-color: var(--td-bg-color-container);
  color: var(--td-text-color-primary);
  border-radius: var(--td-radius-medium);
  overflow: hidden;

  :deep(.splitpanes__pane) {
    background-color: var(--td-bg-color-container);
    color: var(--td-text-color-primary);
    position: relative;
  }
}
</style>
